<template>
  <div>
    <div class="list-box">
      <div v-for="item in billList" :key="item.id" class="list-item">
        <img class="img" @click="handleClick(item)" :src="item.check === 1 ? isCheckImg : noCheckImg" alt="" />
        <span class="name">{{ item.name }}</span>
      </div>
    </div>
    <el-button @click="onCheckedAll" class="checked-btn" type="primary">{{ isCheckedAll ? '取消全选' : '全选' }}</el-button>
    <div class="btn-group-box">
      <div class="btn-right-box">
        <span class="cancel" @click="handleBack">返回</span>
        <span class="submit" @click="handleUpdate">确认</span>
      </div>
      <span class="total"></span>
    </div>
  </div>
</template>

<script setup>
import noCheckImg from "@/assets/images/components/not-check.png";
import isCheckImg from "@/assets/images/components/ischecked.png";
import { computed, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { printerSettingDetail, updatePrinterSetting } from '@/api/computer'
import { isEmpty } from '@/utils/toolsValidate'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const billList = ref([])

onMounted(() => { getPrinterSettingDetail() })

const isCheckedAll = computed(() => billList.value.every(item => item.check === 1))

function getPrinterSettingDetail() {
  printerSettingDetail({ key: 'ticket', printer_id: route.query.printer_id }).then(res => {
    if (!isEmpty(res?.data?.setting)) {
      const dataList = []
      for (const [key, value] of Object.entries(res.data.setting)) {
        dataList.push({ id: key, name: value.name, check: value.check, value })
      }
      dataList.sort((a, b) => a.id - b.id)
      billList.value = dataList
    }
  })
}

function handleClick(item) {
  item.check = item.check === 0 ? 1 : 0
  item.value.check = item.value.check === 0 ? 1 : 0
}

function handleUpdate() {
  const dataObject = {}
  billList.value.forEach(key => { dataObject[key.id] = key.value })
  const datas = { printer_id: route.query.printer_id, key: 'ticket', values: { ...dataObject } }
  updatePrinterSetting(datas).then(res => {
    if (res.status === 200) {
      ElMessage.success('更新设置成功')
      getPrinterSettingDetail()
    }
  })
}

function handleBack() { router.back() }

function onCheckedAll() {
  if (isCheckedAll.value) {
    billList.value.forEach(item => { item.check = 0; item.value.check = 0 })
  } else {
    billList.value.forEach(item => { item.check = 1; item.value.check = 1 })
  }
}
</script>

<style lang="scss" scoped>
.list-box { height: 700px; overflow-y: scroll; display: flex; flex-direction: column; flex-wrap: wrap; margin-left: 60px; margin-top: 40px; box-sizing: border-box; }
.list-box .list-item { display: flex; margin-right: 180px; margin-bottom: 28px; }
.list-box .list-item .img { width: 20px; height: 20px; margin-right: 12px; cursor: pointer; }
.list-box .list-item .name { font-size: 16px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; }
.checked-btn { margin-left: 60px; width: 200px; }
.btn-group-box { display: flex; justify-content: space-between; padding: 20px 30px 30px 60px; box-sizing: border-box; align-items: center; }
.btn-group-box .total { font-size: 14px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; }
.btn-group-box .btn-right-box { display: flex; }
.btn-group-box .btn-right-box .cancel { width: 98px; height: 50px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; margin-right: 40px; cursor: pointer; }
.btn-group-box .btn-right-box .submit { width: 336px; height: 52px; background: #7c0a03; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #ffffff; cursor: pointer; }
</style>
